<template>
	<view class="page">

		<view class="items" style="margin-top: 24rpx;">
			<view class="items_left">
				账号名称
			</view>
			<view class="items_right">
				<u--input placeholder="请输入账号名称" border="surround" v-model="value"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				账号所属人姓名
			</view>
			<view class="items_right">
				<u--input placeholder="请输入账号所属人姓名" border="surround" v-model="value"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				手机号
			</view>
			<view class="items_right">
				<u--input placeholder="请输入手机号" border="surround" v-model="value"></u--input>
			</view>
		</view>
		<view class="fenGe"></view>
		<view class="items" @click="shangJiZhangHao">
			<view class="items_left">
				账号上级
			</view>
			<view class="items_right" style="padding-left: 15rpx;box-sizing: border-box;">
				请选择账号上级
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				账号角色
			</view>
			<view class="items_right" style="padding-left: 15rpx;box-sizing: border-box;">
				请选择账号角色
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				帐号状态
			</view>
			<view class="items_right" style="padding-left: 15rpx;box-sizing: border-box;">
				请选择账号状态
			</view>
		</view>
		<!-- 角色选择弹框 -->
		<u-popup :show="jueSe" @close="close" @open="open" width="750rpx" height="596rpx">
			<view class="jueSeBox">
				<view class="jueSeBox_title">
					请选择账号角色
				</view>
				<view class="jueSe_content">
					<view class="jueSe_content_items" v-for="(itms,index) in jueSeData" :key="itms.id" @click="selectjueSe(itms,index)">
						<view class="jueSe_content_items_title">
							{{itms.title}}
						</view>
						<u-icon name="checkmark" color="#0079FE" size="28" v-if="jueSeIndex == index"></u-icon>
					</view>
					<view class="but">
						
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				jueSe:true,
				jueSeIndex:null,
				jueSeData:[{title:'店销'},{title:'经销商'}]
			}
		},
		methods: {
			shangJiZhangHao() {
				uni.navigateTo({
					url: '/pages/zhang_hao_xin_zeng/zhang_hao_shang_ji'
				})
			},
			selectjueSe(items,index) {
				this.jueSeIndex = index
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.iconBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 636rpx;
		height: 104rpx;
		margin: 48rpx auto 45rpx;
	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx auto 0;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 690rpx;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
		margin: 0 auto 0;
	}

	.items_left {
		width: 200rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.iconBox_left,
	.iconBox_right {
		height: 100%;
	}

	.iconBox_left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.iconBox_left_tou {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.iconBox_right {
		width: 104rpx;
		height: 104rpx;
	}

	.iconBox_left_tps {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		margin-left: 29rpx;
	}

	.iconBox_left_tps span:first-child {
		height: 41rpx;
		font-size: 29rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #1D1C47;
		line-height: 41rpx;
	}

	.iconBox_left_tps span:last-child {
		height: 41rpx;
		font-size: 29rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: 500;
		color: #1D1C47;
		line-height: 40rpx;
		margin-top: 17rpx;
	}

	.items_right {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 30rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
		line-height: 30rpx;
	}

	.items_right {
		width: 460rpx;
	}
	.jueSeBox {
		width: 100%;
		height: 596rpx;
	}
	.jueSeBox_title {
		width: 100%;
		height: 115rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;
		line-height: 115rpx;
		padding: 0 66rpx;
		box-sizing: border-box;
	}
	.jueSe_content {
		width: 100%;
		height: 482rpx;
	}
	.jueSe_content_items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 673rpx;
		height: 105rpx;
		margin:0 auto 0;
		padding: 0 28rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(0,0,0,0.1);
	}
	.but {
		width: 673rpx;
		margin:0 auto 0;
	}
</style>